<template>
    <div class="list">
        <div class="list-title">A</div>

        <ul class="list-list">
             <li class="list-item" v-for="value in msg" :key="value.id" @click="getHot(value.name)">
               {{value.name}}
            </li>
        </ul>
        
         <div class="list-title">B</div>

        <ul class="list-list">
             <li class="list-item" v-for="value in msg" :key="value.id">
               {{value.name}}
            </li>
        </ul>

         <div class="list-title">C</div>

        <ul class="list-list">
             <li class="list-item" v-for="value in msg" :key="value.id">
               {{value.name}}
            </li>
        </ul>

         <div class="list-title">D</div>

        <ul class="list-list">
             <li class="list-item" v-for="value in msg" :key="value.id">
               {{value.name}}
            </li>
        </ul>
    </div>

</template>


<script>
import {mapMutations} from 'vuex'
export default {
  data:function(){
    return {
       msg:[
        {
          id:"01",
          name:"阿坝藏族羌族自治州"
        },
        {
          id:"02",
          name:"阿克苏地区"
        },
        {
          id:"03",
          name:"阿拉尔"
        },
        {
          id:"04",
          name:"阿拉善盟"
        },
        {
          id:"05",
          name:"阿勒泰"
        },
        {
          id:"06",
          name:"阿克苏地区"
        },
        {
          id:"07",
          name:"阿拉尔"
        },
        {
          id:"08",
          name:"阿拉善盟"
        }
      ]
    }
  },
  methods:{
    getHot(value){
      this.$router.push("/")
      this.changeCity(value)
    },
    ...mapMutations(['changeCity'])
  }
}
</script>

<style scoped lang="stylus">
@import '~@/assets/css/common.styl';
.list{
    overflow: hidden;
}
.list-title{
    font-size: .24rem;
    color: #212121;
    padding: .3rem;
   
}
.list-list{
    background: #fff;
    overflow: hidden;
    position: relative;
}
.list-list::before{
  content: "";
  width: 25%;
  height: 100%;
  position:absolute;
  left: 25%;
  border-right: .02rem solid #ddd;
  border-left: .02rem solid #ddd;
}
.list-list::after{
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  left: 75%;
  border-left: .02rem solid #ddd;
}

.list-list .list-item{
    width: 25%;
    height: .9rem;
    line-height: .9rem;
    font-size: .28rem;
    float: left;
    text-align: center;
    border-bottom: .02rem solid #ddd;
   tetxtOverflow();
   position relative;
}
</style>